<template>
  <div class="app">
    <h2>{{ msg }}</h2>
		<input type="text" v-model="msg">
  </div>
</template>

<script lang="ts" setup name="App">
import { ref } from "vue";
// import useMsgRef from './useMsgRef'
import useMsgRef from './useMsgRef.ts'
// 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
// let msg = ref('Hello Vue3')

// 使用useMsgRef来定义一个响应式数据且有延迟效果
let {msg} = useMsgRef('吊毛',2000)

/*
### `customRef`
作用：创建一个自定义的`ref`，并对其依赖项跟踪和更新触发进行逻辑控制。

实现防抖效果（`useSumRef.ts`）：
*/

</script>

<style scoped>
	.app {
		background-color: #ddd;
		border-radius: 10px;
		box-shadow: 0 0 10px;
		padding: 10px;
	}
	button {
		margin:0 5px;
	}
</style>